<div class="bg-light lter b-b wrapper-sm" >
  <div class="row">
    <div class="col-md-6">
      <h4 class="font-thin">{{'singmonitor.head.TITLE'|translate}}</h4>
    </div>
    <div class="col-md-6">
      <div class="pull-right">
        <img src="assets/img/alimak.jpg" style="width:300px;height: 40px">
      </div>
    </div>
  </div>
</div>
<div>

  <tabset  [justified]="true" class="tab-container">
    <tab heading="{{lan.TAB1_HEAD1}}" style="font-size: 20px" >
      <tabset [justified]="true" class="tab-container " >
        <tab heading="{{lan.TAB2_HEAD1}}" class="active">
          <div class="row-fluid" >
            <div class="sin-md6 left">
              <div class="md6-box">
                <div class="convertor-row">
                  <div class="convertor-left1">
                    <img src="assets/img/machine.png">
                  </div>
                  <div class="convertor-left1" style="text-align: left;margin-top: 20px;">
                    <div style="text-align: left;">
                      <span style="font-size:15px;" class="label-status-default green" id="run_state_1">{{lan.RUN_STATE_1}}</span>
                      <span style="font-size:15px;" class="label-status-default green" id="run_state_2">{{lan.RUN_STATE_2}}</span>
                      <span style="font-size:15px;" class="label-status-default green" id="run_state_4">{{lan.RUN_STATE_3}}</span>
                      <span style="font-size:15px;" class="label-status-default green" id="run_state_3">{{lan.RUN_STATE_4}}</span>
                    </div>

                    <h4 style="font-size: 24px;">{{lan.TARGET_FREQUENCY}}：<span id="given_speed">00.00</span><span>Hz</span></h4>
                    <h4 style="font-size: 24px;">{{lan.FEEDBACK_FREQUENCY}}：<span id="feedback_speed2">00.00</span><span>Hz</span></h4>
                  </div>
                </div>
              </div>
              <div class="info-box">
                <div class="info-box-child left">
                  <table class="table table-hover">
                    <caption style="font-size:20px;">{{lan.INVERTER_INFO}}
                      <div style="float:right;">
                        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#configModal1">{{lan.EDIT}}</button>
                      </div>
                    </caption>
                    <tbody>
                    <tr>
                      <td>{{lan.TAB1_TR1_TD1}}</td>
                      <td class="tdcls">{{lan.TAB1_TR1_TD2}}</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR2_TD1}}</td>
                      <td class="tdcls">AS620</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR3_TD1}}(KW)</td>
                      <td class="tdcls" id="inverter_power">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR4_TD1}}(V)</td>
                      <td class="tdcls" id="inverter_vol">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR5_TD1}}(A)</td>
                      <td class="tdcls" id="inverter_cur">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR6_TD1}}(Hz)</td>
                      <td class="tdcls" id="inverter_freq">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR7_TD1}}</td>
                      <td class="tdcls" id="inverter_hardver">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR8_TD1}}</td>
                      <td class="tdcls" id="inverter_softver">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB1_TR9_TD1}}</td>
                      <td class="tdcls" id="inverter_version">null</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="info-box-child right">
                  <table class="table table-hover">
                    <caption style="font-size:20px;">{{lan.MOTOR_INFO}}
                      <div style="float:right;" >
                        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#configModal2">{{lan.EDIT}}</button>
                      </div>
                    </caption>
                    <tbody>
                    <tr>
                      <td>{{lan.TAB2_TR1_TD1}}</td>
                      <td class="tdcls">HENGDA</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR2_TD1}}</td>
                      <td class="tdcls">YE2VPEJS132L5-4</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR3_TD1}}(Kw)</td>
                      <td class="tdcls" id="motor_power">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR4_TD1}}(V)</td>
                      <td class="tdcls" id="motor_vol">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR5_TD1}}(A)</td>
                      <td class="tdcls" id="motor_cur">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR6_TD1}}(Hz)</td>
                      <td class="tdcls" id="motor_freq">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR7_TD1}}(rmp)</td>
                      <td class="tdcls" id="motor_speed">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB2_TR8_TD1}}(p)</td>
                      <td class="tdcls" id="motor_poles">null</td>
                    </tr>
                    <tr>
                      <td>{{lan.TAB3_TR9_TD1}}(N&bull;m)</td>
                      <td class="tdcls" id="motor_torq">null</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="sin-md6 right">
              <div class="md6-box nopadding-up-down">
                <div class="info-box">
                  <div class="info-box-title" style="font-size:20px;">
                    {{lan.MONITOR_DATA}}<br /><br /><br /><br /><br />
                    <div>
                      <button class="btn btn-info btn-md "  (click)="openModal(1)" style="margin-top: 15px">{{lan.USER_DEFINED}}</button>
                    </div>
                  </div>
                  <div class="info-box-content">
                    <table class="table table-hover">
                      <tbody>
                      <tr>
                        <td>{{lan.TAB3_TR1_TD1}}(Hz)</td>
                        <td class="tdcls" id="given_speed1">null</td>
                        <td>{{lan.TAB3_TR1_TD2}}(V)</td>
                        <td class="tdcls" id="output_voltage">null</td>
                      </tr>
                      <tr>
                        <td>{{lan.TAB3_TR2_TD1}}(Hz)</td>
                        <td class="tdcls" id="feedback_speed1">null</td>
                        <td>{{lan.TAB3_TR2_TD2}}(rmp)</td>
                        <td class="tdcls" id="output_rmp">null</td>
                      </tr>
                      <tr>
                        <td>{{lan.TAB3_TR3_TD1}}(%)</td>
                        <td class="tdcls" id="drive_efficiency">null
                        </td>
                        <td>{{lan.TAB3_TR3_TD2}}(%)</td>
                        <td class="tdcls" id="output_torque">null</td>
                      </tr>
                      <tr>
                        <td>{{lan.TAB3_TR4_TD1}}(A)</td>
                        <td class="tdcls" id="output_current">null</td>
                        <td>{{lan.TAB3_TR4_TD2}}</td>
                        <td class="tdcls" id="run_state">null</td>
                      </tr>
                      <tr>
                        <td>{{lan.TAB3_TR5_TD1}}(V)</td>
                        <td class="tdcls" id="bus_voltage">null</td>
                        <td>{{lan.TAB3_TR5_TD2}}(&#176;C)</td>
                        <td class="tdcls" id="cooling_temperature">null</td>
                      </tr>
                      <tr>
                        <td>{{aaData1?.name}}</td>
                        <td class="tdcls" id="definedata1"></td>
                        <td>{{aaData2?.name}}</td>
                        <td class="tdcls" id="definedata2"></td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="md6-box">
                <div class = " box" style="border:0px;box-shadow:0 0px 0px;">
                  <div class="row" >
                    <div class="col-xs-4" style="text-align:center;margin-left: 15px;font-size:18px;color:#888888;">
                      {{lan.INPUT_STATUS}}
                    </div>
                    <div class="col-xs-1"> &nbsp;</div>
                    <div class="col-xs-7" style="text-align: left;margin-left: -75px;margin-bottom: 10px;">
                      <span class="label-status-default gray " id="X0">X0</span>
                      <span class="label-status-default gray " id="X1">X1</span>
                      <span class="label-status-default gray " id="X2">X2</span>
                      <span class="label-status-default gray " id="X3">X3</span>
                      <span class="label-status-default gray " id="X4">X4</span>
                      <span class="label-status-default gray " id="X5">X5</span>
                      <span class="label-status-default gray " id="X6">X6</span>

                    </div>
                  </div>
                </div>

                <div class="box" style="border:0px;box-shadow:0 0px 0px;">
                  <div class="row">
                    <div class="col-xs-4" style="margin-left: 15px;font-size:18px;color:#888888;">{{lan.OUTPUT_STATUS}}</div>
                    <div class="col-xs-1">&nbsp;</div>
                    <div class="col-xs-7" style="text-align: left;margin-left: -75px;">
                      <span class="label-status-default gray" id="K1">K1</span>
                      <span class="label-status-default gray" id="K2">K2</span>
                      <span class="label-status-default gray" id="K3">K3</span>
                      <span class="label-status-default gray" id="K4">K4</span>
                      <span class="label-status-default gray" id="Y0">Y0</span>
                      <span class="label-status-default gray" id="Y1">Y1</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="info-box">
                <div class="info-box-child">
                  <table class="table table-hover table-status-center">
                    <caption style="font-size:20px;">
                      {{lan.FAULT_RECORD}}
                      <div style="float:right;" >
                        <button type="button" class="btn btn-info" id="getfault" (click)="getFault('fault')">{{lan.READ_FAULT_INFO}}</button>
                                           <span >
                                          <button class="btn btn-info"   (click)="openModal(2)" >{{lan.DETAILS}}</button>
                                           </span>
                      </div>
                    </caption>
                    <tbody>
                    <tr>
                      <td>{{lan.TAB4_TD1}}</td>
                      <td>{{lan.TAB4_TD2}}</td>
                      <td>{{lan.TAB4_TD3}}</td>
                      <td>{{lan.TAB4_TD4}}</td>
                      <td>{{lan.TAB4_TD5}}</td>
                      <td>{{lan.TAB4_TD6}}</td>

                    </tr>
                    <tr>
                      <td class="tdcls">1</td>
                      <td class="tdcls" id="fault0_code">null</td>
                      <td class="tdcls" id="fault0_name">null</td>
                      <td class="tdcls">5</td>
                      <td class="tdcls" id="fault4_code">null</td>
                      <td class="tdcls" id="fault4_name">null</td>

                    </tr>
                    <tr>
                      <td class="tdcls">2</td>
                      <td class="tdcls" id="fault1_code">null</td>
                      <td class="tdcls" id="fault1_name">null</td>
                      <td class="tdcls">6</td>
                      <td class="tdcls" id="fault5_code">null</td>
                      <td class="tdcls" id="fault5_name">null</td>

                    </tr>
                    <tr>
                      <td class="tdcls">3</td>
                      <td class="tdcls" id="fault2_code">null</td>
                      <td class="tdcls" id="fault2_name">null</td>
                      <td class="tdcls">7</td>
                      <td class="tdcls" id="fault6_code">null</td>
                      <td class="tdcls" id="fault6_name">null</td>

                    </tr>
                    <tr>
                      <td class="tdcls">4</td>
                      <td class="tdcls" id="fault3_code">null</td>
                      <td class="tdcls" id="fault3_name">null</td>
                      <td class="tdcls">8</td>
                      <td class="tdcls" id="fault7_code">null</td>
                      <td class="tdcls" id="fault7_name">null</td>

                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

        </tab>
        <tab heading="{{lan.TAB2_HEAD}}" >
          <div class="row-fluid">
            <button type="button" class="btn btn-primary" (click)="getParams('param')" >{{lan.PARAM_BTN}}</button>
          </div>
          <div class = "row" id="loadingdata" style="display: none;" >
            <div class="col-xs-8 col-xs-offset-2" >
              <div  class="panel panel-default">
                <div class="panel-heading">{{lan.PARAM_INFO}}</div>
                <div class="panel-body" style="text-align: center">
                  {{lan.LOADING}}...
                  <div class="overlay">
                    <i class="fa fa-refresh fa-spin"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row"  >
            <div class="col-xs-8 col-xs-offset-2" id="parainfo2"  style="display:none"></div>
          </div>
        </tab>

      </tabset>
    </tab>

  </tabset>
</div>


<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">自定义监控数据</p>
            <p *ngIf="buttonType==2">故障详情</p>
          </h3>
        </div>
        <div class="modal-body">

          <div class="dropdown" *ngIf="buttonType==1">
            <div class="channel-choice-box">
              <div class="channel-choice-box-left">
                <span>自定义1：</span>
                <select [(ngModel)]="oo.selected1">
                  <option value="">--请选择--</option>
                  <option value="system_time|系统时间(CH)">系统时间(H)</option>
                  <option value="cooling_temperature|散热器温度(&#176;C)">散热器温度(&#176;C)</option>
                  <option value="voltage_u|U相电压(瞬时值)(V)">U相电压(瞬时值)(V)</option>
                  <option value="voltage_v|V相电压(瞬时值)(V)">V相电压(瞬时值)(V)</option>
                  <option value="voltage_w|W相电压(瞬时值)(V)">W相电压(瞬时值)(V)</option>
                </select>
              </div>

              <div class="channel-choice-box-right">
                <span>自定义2：</span>
                <select [(ngModel)]="oo.selected2">
                  <option value="">--请选择--</option>
                  <option value="current_u|U相电流(瞬时值)(A)">U相电流(瞬时值)(A)</option>
                  <option value="current_v|V相电流(瞬时值)(A)">V相电流(瞬时值)(A)</option>
                  <option value="current_w|W相电流(瞬时值)(A)">W相电流(瞬时值)(A)</option>
                  <option value="output_actpow|输出有功功率(Kw)">输出有功功率(Kw)</option>
                  <option value="total_power|输出总功率(Kw)">输出总功率(Kw)</option>
                  <option value="power_factor|功率因数(%)">功率因数(%)</option>
                </select>
              </div>
            </div>
          </div>

          <table class="table table-hover table-status-center " *ngIf="buttonType==2">
            <tr>
              <td><strong>序号</strong></td>
              <td><strong>故障代码</strong></td>
              <td><strong>故障名称</strong></td>
              <td><strong>实际速度Hz</strong></td>
              <td><strong>给定速度Hz</strong></td>
              <td><strong>母线电压V</strong></td>
              <td><strong>电流A</strong></td>
            </tr>
            <tr *ngFor="let item of oo;index as idx">
              <td class="tdcls">{{idx + 1}}</td>
              <td class="tdcls">{{item.fault_code}}</td>
              <td class="tdcls">{{item.fault_name}}</td>
              <td class="tdcls">{{item.fault_real_speed}}</td>
              <td class="tdcls">{{item.fault_given_speed}}</td>
              <td class="tdcls">{{item.fault_bus_voltage}}</td>
              <td class="tdcls">{{item.fault_current}}</td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">
          <button *ngIf="buttonType==1" class="btn btn-primary" (click)="myModal.hide()" [disabled]="disabled">保存</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>
